<template>
  <view class="userlist">
    <!-- @click="gotoTaskLook(user)" -->
    <view
      v-for="(user, index) in list"
      :key="index"
      class="userlist-item"
    >
      <view v-viewer="{movable: false}">
        <u-avatar
          border-radius="6px"
          :src="user.avatar"
          mode="square"
          size="115"
        />
      </view>
      <view :class="`userlist-usercontent ${index !== list.length - 1 && 'userlist-usercontent-bottomline'}`">
        <view class="userlist-username">
          <view>{{ user.userName }}</view>
          <view>({{ user.userRole }})</view>
        </view>
        <view>
          {{ user.enterpriseName }}
        </view>
      </view>
    </view>
  </view>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
  // methods: {
  //   gotoTaskLook(user) {
  //     console.log(user.cEnterpriseCode);
  //     this.$router.push({
  //       path: '/moretownview',
  //       query: {
  //         taskGuid: this.$store.state.task.resData.guid,
  //         enterpriseGuid: user.cEnterpriseCode
  //       }
  //     });
  //   }
  // }
};
</script>

<style lang="scss" scoped>

.userlist {
  background-color: #fff;
  position: relative;
  top: 12px;
  .userlist-item {
    padding: 7px 12px;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 17px;
    position: relative;
    > view {
      height: 56px;
    }

    .userlist-usercontent {
      padding: 3px 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;

      > view {
        &:nth-child(2) {
          font-size: 16px;
          color: #b6b9bf;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
    }

    .userlist-usercontent-bottomline {
      &::after {
        content: '';
        display: block;
        position: absolute;
        bottom: -10px;
        right: -12px;
        left: 0;
        border-bottom: 1px solid #EAECF0;
      }
    }

    .userlist-username {
      font-size: 17px;
      display: flex;
      color: #303133;
      align-items: center;
      > view {
        &:nth-child(2) {
          flex: 1;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          padding-left: 5px;
        }
      }

    }
  }
}
</style>
